<template>
    <div class="customer-file-fill-in">
        <c-title :text="text"></c-title>
        <div class="box">
            <van-cell-group>
                <van-field v-model="form.name" label="项目" placeholder="请输入项目名称" />
                <van-field v-model="form.teacher_name" label="操作老师" placeholder="请输入姓名" />
                <van-field v-model="form.price" label="价格" placeholder="请输入价格" />
                <van-field v-model="form.remark" type="textarea" autosize  rows="1" label="备注" placeholder="请输入备注" />
                <div class="photo">
                    <div class="text">图片</div>
                    <div class="flex-a-c">
                        <van-uploader v-model="fileList" :after-read="multipleMethod_1" :before-delete="multiple_delete"
                            multiple :max-count="9">
                            <div class="diy-uploader-css">
                                <van-icon name="plus" />
                            </div>
                        </van-uploader>
                    </div>
                </div>


            </van-cell-group>

        </div>
        <div class="button"  :class="{'w375': fun.isPc()}">
            <button @click="handle_submit">保存</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: "",
                teacher_name: "",
                price: "",
                remark: ""
            },
            image_list: [],
            fileList: [],
            text: "",
            timerId:null,
        };
    },
    deactivated(){
        if(this.timerId){
            clearTimeout(this.timerId);
        }
        this.timerId = null;
    },
    activated() {
        this.timerId = null;
        this.image_list = [];
        this.form = {
            name: "",
            teacher_name: "",
            price: "",
            remark: ""
        };
        this.fileList = [];
        if (this.$route.params.id) {
            this.text = '编辑项目';
            this.fun.setWXTitle('编辑项目')
            this.getDetail();
        } else {
            this.text = '添加项目'
            this.fun.setWXTitle('添加项目')
        }
    },
    methods: {
        handle_submit() {
            let json = {};
            let url = '';
            if (this.$route.params.id) {
                json = {
                    form: { id: this.$route.params.id, ...this.form, image_list: this.image_list },
                }
                url ="plugin.customer-archive.frontend.customer-archive.save-project-info";
            } else {
                 url = 'plugin.customer-archive.frontend.customer-archive.add-project';
                 json = {
                    form :{
                         customer_archive_id:this.$route.params.customer_archive_id,
                         ...this.form,
                         image_list:this.image_list
                    }
                 }
            }
            $http.post(url, json, '.').then(res => {
                    this.$toast(res.msg);
                    if (res.result) {
                        this.timerId = setTimeout(() => {
                            this.$router.go(-1);
                        }, 500);
                    }
                })
        },
        getDetail() {
            $http.post("plugin.customer-archive.frontend.customer-archive.get-project-info", { project_id: this.$route.params.id }, '.').then(res => {
                let { result, msg, data } = res;
                if (result) {
                    this.form = {
                        name: data.name,
                        remark: data.remark,
                        price: data.price,
                        teacher_name: data.teacher_name
                    }
                    data.image_list && data.image_list.length !== 0 && data.image_list.forEach(item => {
                        if(item){
                            this.fileList.push({ url: item })
                            this.image_list.push(item);
                        }
                    })
                } else {
                    this.$toast(msg);
                }
            })
        },

        multiple_delete(e, flag) {
            this.image_list.splice(flag.index, 1);
            return true;
        },
        multipleMethod_1(e, flag) {
            if (e && e.length) {
                for (let i = 0; i < e.length; i++) {
                    this.onRead_1(e[i], flag);
                }
            } else {
                this.onRead_1(e, flag);
            }
        },
        onRead_1(e, flag) {
            this.$toast.loading({
                message: "上传中",
                forbidClick: true
            });
            let fd = new FormData();
            if (flag === true) {
                fd.append("file", e);
            } else {
                fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
            }
            axios
                .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
                    headers: { "Content-Type": "multipart/form-data" }
                })
                .then(response => {
                    var responseData = response.data;
                    if (responseData.result === 1) {
                        this.image_list.push(responseData.data.img_url);
                        this.$toast.clear();
                    } else {
                        this.$toast(responseData.msg)
                        this.$toast.clear();
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
    }
};
</script>

<style scoped lang='scss'>
.w375{
    width: 375px !important;
    left:50% !important;
    transform: translateX(-50%);
}
::v-deep .van-uploader__wrapper{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap:.625rem;
}
::v-deep .van-cell-group {
    border-radius: .5rem;
    overflow: hidden;
}

::v-deep .van-uploader__input-wrapper {
    width: unset;
    margin: 0;
}

::v-deep .van-uploader__wrapper{
    display: grid;
    grid-template-columns: auto auto auto;
}
::v-deep .van-field__label {
    font-weight: 500;
    font-size: .875rem;
    color: #00001C;
}

::v-deep .van-uploader__preview {
    margin: .4688rem 0;
}

::v-deep .van-uploader {
    width: 100%;
}

::v-deep .van-uploader__input {
    width: 6rem;
    height: 6rem;
}

::v-deep .van-uploader__preview-image {
    width: 6rem;
    height: 6rem;
    border-radius: .5rem;
}

::v-deep .van-cell {
    padding: 10px .75rem;
}

.diy-uploader-css ::v-deep .van-icon {
    color: #D6D6DC;
    font-size: 1.4063rem;
}

.customer-file-fill-in {
    padding-bottom: 6.0938rem;

    .add {
        margin-top: 1.5625rem;
        color: var(--themeBaseColor);
        font-weight: 500;
        font-size: .875rem;
        text-align: center;
    }

    .add .van-icon {
        margin-right: .3125rem;
    }

    .photo {
        padding: 0 .75rem;
        margin-bottom: .9688rem;
    }

    .diy-uploader-css {
        width: 6rem;
        height: 6rem;
        background: #F8F8F8;
        border-radius: .5rem .5rem .5rem .5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text {
        margin-bottom: .75rem;
        margin-top: 1.2188rem;
        text-align: left;
        font-weight: 500;
        font-size: .875rem;
        color: #00001C;
    }



    .box {
        padding: .625rem .75rem;
    }

    .button {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.75rem;
        display: flex;
        align-items: center;
        padding: 0 .75rem;
        background: #FFFFFF;
        box-shadow: 0rem -0.0313rem .3125rem .0313rem #F5F5F5;
        border-radius: 0rem 0rem 0rem 0rem;

        button {
            display: block;
            width: 100%;
            height: 2.5rem;
            background: var(--themeBaseColor);
            border-radius: 1.2813rem;
            font-weight: 500;
            font-size: .9375rem;
            color: #FFFFFF;
            border: none;
        }
    }
}

/** **/
</style>